import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router';
import ButtonDropDown from './ButtonDropDown.js';

class WorkThumbnail extends Component {
  constructor(props) {
    super(props);
    this.edit = this.edit.bind(this);
    this.unpublish = this.unpublish.bind(this);
    this.delete = this.delete.bind(this);
    this.state = { ...props };
  }

  edit() {
    const { work, location, router } = this.props;
    router.push(`work/${work.id}/edit?returnUrl=${location.pathname}`);
  }

  unpublish() {
    if (this.props.unpublish) {
      this.props.unpublish(this.props.work.id);
    }
  }

  delete() {
    if (this.props.delete) {
      this.props.delete(this.props.work.id);
    }
  }

  renderDropDownMenu() {
    const { work, isMine } = this.props;
    if (isMine) {
      return (
        <ButtonDropDown>
          {work.status === 'PUBLIC' &&
            <ul>
              <li onClick={this.edit}><span>编辑</span></li>
              <li onClick={this.unpublish}><span>撤回</span></li>
              <li onClick={this.delete}><span>删除</span></li>
            </ul>
          }
          {work.status === 'PRIVATE' &&
            <ul>
              <li onClick={this.delete}><span>删除</span></li>
            </ul>
          }
        </ButtonDropDown>
      );
    }
  }

  attachThumbnailImage(work) {
    if (work.files && !work.workThumbnail) {
      const workThumbnailFile = work.files.find(f => f.fileType === 'THUMBNAIL');
      work.workThumbnail = workThumbnailFile ? workThumbnailFile.fileUrl : '';
    }
  }

  componentDidMount() {
    const { work } = this.props;
    this.attachThumbnailImage(work);
    const img = document.createElement('img');
    img.onload = img.onerror = () => {
      this.setState({
        imgLoaded: true,
      });
    };
    img.src = work.workThumbnail;
  }

  render() {
    const { work, location, isMine } = this.props;
    const workDetailLink = isMine ? `work/${work.id}/detail/mine` : `work/${work.id}/detail`;
    let editUrl = `work/${work.id}/edit`;
    if (location && location.pathname) {
      editUrl += `?returnUrl=${location.pathname}`;
    }
    this.attachThumbnailImage(work);
    const bgStyle = {
      backgroundImage: `url('${work.workThumbnail}')`,
    };
    const likeClass = 'like icon-black_heart_line';
    return (
      <div key={work.id} className="thumb-item">
        <div className="thumb-image" data-loaded={!!this.state.imgLoaded} style={bgStyle}>
          {this.renderDropDownMenu()}
          {(work.status === 'PUBLIC' || !isMine) && <Link to={workDetailLink}>
            <div className="thumb-mask">
              <span>{work.name}</span>
            </div>
          </Link>
          }
          {(isMine && work.status === 'PRIVATE') && <Link to={editUrl}>
            <div className="thumb-mask">
              <span>{work.name}</span>
            </div>
          </Link>
          }
          <meta itemProp="image" content={work.workThumbnail} />
          <div style={{ paddingTop: '56.25%' }} />
        </div>
        <div className="thumb-info">
          <Link to={`user/${work.userId}`}>
            {work.userImagePath && <img src={work.userImagePath} />}
            <span className="name">{work.userName}</span>
          </Link>
          <div style={{ float: 'right', color: '#979797', height: '100%' }}>
            <span className="like-box">
              <i className={likeClass} />
            </span>
            <span className="likes-count">{work.likeCount}</span>
          </div>
        </div>
      </div>
    );
  }
}

WorkThumbnail.propTypes = {
  work: PropTypes.shape({
    id: PropTypes.number,
    name: PropTypes.string,
    workThumbnail: PropTypes.string,
    userId: PropTypes.number,
    userName: PropTypes.string,
    workAuthorAvatar: PropTypes.string,
    likeCount: PropTypes.number,
  }),
  location: PropTypes.object,
  router: PropTypes.object,
  unpublish: PropTypes.func,
  delete: PropTypes.func,
  isMine: PropTypes.bool,
};

export default WorkThumbnail;
